﻿<div ng-controller="SummaryRelativePerformanceController as relativeCtrl">
    <div class="border-spacer">
        Relative performance
    </div>    
    <div class="row-fluid ng-scope">
        <div class="col-md-3">
            <div class="sidebar-table-left no-border" style="width: 95px;">
                <div class="green-number-bubble" style="background-color: #FCAF17;">
                    {{relativeCtrl.companyRelativePerformance.percentile}}<sup style="font-size: 11px; top: -14px;">{{relativeCtrl.regionalPercentileOrdinal}}</sup>
                </div>
            </div>
            <div class="sidebar-table-right no-border" style="width: 130px;">
                <div class="title-black-border">Regional Percentile</div>
                <ul class="esg-ratings">
                    <li class="active ng-binding">{{relativeCtrl.companyRelativePerformance.region}}</li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="col-md-9">
            <div style="float: left; width: 48%; margin-right: 4%;">
                <div class="table-2" style="margin-top: 9px;">
                    <div class="table-row-2">
                        <div class="table-cell-head-2 width_370">Top 5 Companies</div>
                        <div class="table-cell-head-2">Score</div>
                    </div>
                    <div class="table-row" ng-repeat="item in relativeCtrl.companyRelativePerformance.topFive">                        
                        <div class="table-cell-2 width_370" ng-class="{ 'green-bold': relativeCtrl.companyId == item.companyId }">{{item.companyName}}</div>
                        <div class="table-cell-2" style="text-align: right;">{{item.score}}</div>
                    </div>
                </div>
            </div>
            <div style="float: left; width: 48%;">
                <div class="table-2" style="margin-top: 9px;">
                    <div class="table-row-2">
                        <div class="table-cell-head-2 width_370 ng-binding">Peers (Market cap ${{ relativeCtrl.companyRelativePerformance.marketCapRangeFrom  | number: 0}}-${{ relativeCtrl.companyRelativePerformance.marketCapRangeTo | number: 0 }}bn)</div>
                        <div class="table-cell-head-2">Score</div>
                    </div>

                    <div class="table-row" ng-repeat="item in relativeCtrl.companyRelativePerformance.peers">
                        <div class="table-cell-2 width_370" ng-class="{ 'green-bold': relativeCtrl.companyId == item.companyId }">{{item.companyName}}</div>                        
                        <div class="table-cell-2 ng-binding" style="text-align: right;">{{item.score}}</div>
                    </div>
                </div>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
</div>
